<template>
  <div class="home">
    <!-- <img  alt="" src="../static/background_header.png" /> -->
    <div class="background-header">
      <div class="top-bar">
        <img src="../static/nav_icon_backblack@3x.png" alt="" />
        <div class="title">1218品牌打榜赛</div>
      </div>
      <div class="jinbang-background">
        <swiper v-if="this.banner.length !== 0" :banner="banner" />
      </div>
      <img class="banner-front" src="../static/banner_front@3x.png" alt="" />
      <div class="rule">规则</div>
    </div>
    <div class="switch-bar-bgc">
      <div class="switch-bar">
        <div class="same-style" @click="switchTab(0)">
          <img
            class="wheat animate-style"
            :src="
              require(!isSwitch
                ? '../static/wheat_left@3x.png'
                : '../static/uncheck_wheat_left@3x.png')
            "
            alt=""
          />
          <div class="button-text">
            <div
              class="tit animate-style"
              :class="!isSwitch ? 'tit-color' : ''"
            >
              甄选好品牌
            </div>
            <div
              class="info animate-style"
              :class="!isSwitch ? 'info-color' : ''"
            >
              火热进行中
            </div>
          </div>
          <img
            class="wheat animate-style"
            :src="
              require(!isSwitch
                ? '../static/wheat_right@3x.png'
                : '../static/uncheck_wheat_right@3x.png')
            "
            alt=""
          />
        </div>
        <div class="same-style" @click="switchTab(1)">
          <img
            class="wheat animate-style"
            :src="
              require(isSwitch
                ? '../static/wheat_left@3x.png'
                : '../static/uncheck_wheat_left@3x.png')
            "
            alt=""
          />
          <div class="button-text">
            <div class="tit animate-style" :class="isSwitch ? 'tit-color' : ''">
              甄选品牌榜
            </div>
            <div
              class="info animate-style"
              :class="isSwitch ? 'info-color' : ''"
            >
              12月25日揭晓
            </div>
          </div>
          <img
            class="wheat animate-style"
            :src="
              require(isSwitch
                ? '../static/wheat_right@3x.png'
                : '../static/uncheck_wheat_right@3x.png')
            "
            alt=""
          />
        </div>
        <div class="tab" ref="switchTab"></div>
      </div>
    </div>
    <SecondaryNavigation
      v-if="!isSwitch"
      :productList="productList"
      @clickSwitch="clickSwitch"
    />
    <ProductList
      v-if="!isSwitch"
      :productList="productList"
      @onLoad="onLoad"
      @onMessage="onMessage"
      :currtEr="currtEr"
    />
    <BrandList
      v-if="isSwitch"
      @updateNum="updateNum"
      msg="Welcome to Your Vue.js App"
    />
    <Tips v-if="!isSwitch" />
    <Loading :isLoading="isLoading" />
    <Popup ref="alertMsg" />
  </div>
</template>

<script>
// @ is an alias to /src
import BrandList from '@/components/BrandList.vue'
import ProductList from '@/components/ProductList.vue'
import SecondaryNavigation from '@/components/SecondaryNavigation.vue'
import Swiper from '../components/Swiper.vue'
import Tips from '../components/Tips.vue'
import pixel from '../utils/pixel'
import { getBrandList } from '../api/brandList'
import { getBrandGood } from '../api/brandGood'
import Loading from '../components/Loading.vue'
import Popup from '../components/Popup.vue'

export default {
  name: 'Home',
  components: {
    BrandList,
    ProductList,
    SecondaryNavigation,
    Swiper,
    Tips,
    Loading,
    Popup,
  },
  data() {
    return {
      isSwitch: true,
      timer: null,
      banner: [],
      productList: [],
      currtEr: 0,
      hotArr: [],
      isLoading: false,
    }
  },
  created() {
    getBrandList().then((res) => {
      this.banner = res.data.data.banner
      this.productList = res.data.data.category
      this.currtEr = this.productList[0].id
      this.updateNum(this.currtEr, 0)
    })
  },
  methods: {
    clickSwitch(e, _index) {
      this.currtEr = e
      this.updateNum(e, _index)
    },
    onLoad(isLoad) {
      this.isLoading = isLoad
      console.log(this.isLoading)
    },
    onMessage(msg) {
      this.$refs.alertMsg.alertDia(msg)
    },
    async updateNum(e, _index) {
      await getBrandGood(e).then((res) => {
        this.hotArr = res.data.data.brand_good_info
        this.productList[_index].brandList = this.productList[
          _index
        ].brandList.map((item, index) => {
          const temp =
            this.hotArr &&
            this.hotArr.filter(
              (_item, index) => _item.brand_id === Number(item.brandId)
            )
          return temp ? Object.assign(item, temp[0]) : item
        })
        console.log(this.productList[_index].brandList)
      })
    },
    switchTab(e) {
      const status = e !== 0
      if (this.timer !== null) clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        this.isSwitch = status
        this.firstLevel = status
      }, 400)
      this.$refs.switchTab.style.left = e === 0 ? pixel(8) : pixel(362)
      // this.$refs.tabTit[e].setAttribute('class', 'tit-color')
    },
  },
}
</script>
<style lang="scss" scoped>
@import '../assets/sass/mixin.scss';
@import '../assets/sass/reset.scss';
@import '../assets/sass/_variable.scss';
.home {
  background: #da193e;
  padding-bottom: rem(104);
  width: rem(750);
  .background-header {
    background-image: url('../static/background_header.png');
    background-size: 100%;
    width: rem(750);
    height: rem(514.7);
    position: relative;
    .top-bar {
      height: rem(44);
      padding: rem(109) rem(24) rem(52);
      display: flex;
      img {
        width: rem(44);
        height: rem(44);
      }
      .title {
        flex: 1;
        text-align: center;
        font-size: rem(36);
        line-height: rem(36);
        margin: 0 0 0 rem(-44);
        align-items: center;
        font-family: PingFangSC-Semibold;
        color: #ffffff;
        font-weight: 600;
      }
    }
    .jinbang-background {
      // background: url('../static/jinbang_background1@3x.png') center bottom,
      // linear-gradient(225deg, #ea2837 0%, #b8dcff 48%, #fa7332 100%);
      background-size: 100%;
      width: rem(714);
      height: rem(270);
      margin: 0 auto;
      overflow: hidden;
      border-radius: rem(20);
    }
    .rule {
      position: absolute;
      width: rem(74);
      height: rem(36);
      right: 0;
      bottom: rem(15);
      background: #000000;
      border-radius: 100px 0 0 100px;
      opacity: 0.3;
      font-size: rem(22);
      line-height: rem(33);
      color: #ffffff;
      text-align: center;
      letter-spacing: 0;
    }
    .banner-front {
      width: 100%;
      height: rem(115.5);
      position: absolute;
      bottom: 0;
    }
  }
  .switch-bar-bgc {
    width: rem(750);
    height: rem(113);
    margin-top: rem(-1);
    background: #da193e;
    .switch-bar {
      width: rem(702);
      height: rem(112);
      margin: 0 rem(24);
      background: #cb1437;
      border-radius: rem(56);
      display: flex;
      align-items: center;
      color: #ffffff;
      position: relative;
      justify-content: space-between;
      .tab {
        background: linear-gradient(
          180deg,
          #fff1e1 0%,
          #ffd6ae 50%,
          #ffb875 100%
        );
        height: rem(96);
        width: rem(332);
        border-radius: rem(50);
        transition: left 1s;
        position: absolute;
        left: rem(362);
        // left:  rem(8);
      }
      .same-style {
        height: rem(96);
        padding: 0 rem(59);
        margin: 0 rem(8);
        border-radius: rem(50);
        display: flex;
        align-items: center;
        z-index: 100;
      }
      .wheat {
        width: rem(28);
        height: rem(43);
      }
      .button-text {
        height: rem(87);
        margin: 0 rem(4);
        text-align: center;
        .tit {
          font-size: rem(30);
          line-height: rem(42);
        }
        .tit-color {
          color: #975623;
        }
        .info {
          font-size: rem(24);
          line-height: rem(33);
        }
        .info-color {
          color: #bb6e32;
        }
      }
    }
  }
  .animate-style {
    transition: all 0.8s ease-out;
  }
}
</style>
